import React, {useEffect, useState} from "react";
import api from "../../../api";
import {useSearchParams} from "react-router-dom";
import {Button, Card, Form, Input, message, Modal} from "antd";

const InterviewDetails = () => {
    const [searchParams] = useSearchParams()

    const [details, setDetails] = useState<any>({})

    const [isModalVisible, setIsModalVisible] = useState(false);

    const [form] = Form.useForm();

    const handleOk = () => {
        form.validateFields().then(values => {
            values.id = details._id
            // console.log(values)
            api.replyInterview(values).then(res => {
                message.success(res.msg)
                getDetails()
                setIsModalVisible(false)
            }).catch(err => {
                message.error(err)
            })
            setIsModalVisible(false);
        }).catch(err => {
        });
    };

    const getDetails = () => {
        api.getInterview({id: searchParams.get("id")}).then(res => {
            if (res.code === 200) {
                setDetails(res.data)
            }
        })
    }

    useEffect(() => {
        getDetails()
    }, []);

    return details._id && (
        <div>
            <Card title={details.title} extra={<Button type="primary" onClick={() => {
                setIsModalVisible(true);
            }}>回复</Button>}>
                <p>{details.content}</p>
                <div style={{textAlign: "right", fontSize: "12px", marginTop: "20px"}}>
                    {new Date(parseInt(details.time)).toLocaleString()}
                </div>
            </Card>
            <Card title="回复" bodyStyle={{overflow: "auto", height: "calc(100vh - 330px)",}}>
                {
                    details.reply.map((item: any, index: any) => {
                        // console.log(details.reply)
                        return (
                            <Card
                                key={index}
                                hoverable
                                style={{marginBottom: 16}}
                                type="inner"
                                title={item.username}
                                extra={new Date(parseInt(item.time)).toLocaleString()}
                            >
                                {item.content}
                            </Card>
                        )
                    })
                }

            </Card>

            <Modal title="回复" visible={isModalVisible} onOk={handleOk} onCancel={() => {
                form.resetFields();
                setIsModalVisible(false);
            }}>
                <Form
                    name="basic"
                    autoComplete="off"
                    layout="vertical"
                    form={form}
                >
                    <Form.Item
                        label="回复内容"
                        name="content"
                        rules={[{required: true, message: '回复内容是必填的!'}]}
                    >
                        <Input.TextArea placeholder="请输入回复内容" showCount rows={6}/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};
export default InterviewDetails;